<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
  >
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="box" id="drag" style="left: 0; top: 0"></div>
</body>
</html>

<script>
  let drag = document.getElementById('drag')
  let delta_x = 0
  let delta_y = 0
  console.log(x_init, y_init)
  drag.addEventListener('touchstart', (event)=>{
    x_init = drag.clientLeft
    y_init = drag.clientTop
    delta_x = event.targetTouches[0].clientX - drag.offsetLeft
    delta_y = event.targetTouches[0].clientY - drag.offsetTop
  })

  drag.addEventListener('touchmove', (event)=> {
    drag.style.left = drag.clientLeft + event.targetTouches[0].clientX - delta_x + 'px'
    drag.style.top = drag.clientTop + event.targetTouches[0].clientY - delta_y + 'px'
  })

</script>

<style>
  .box {
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: black;
    cursor: pointer;
  }

</style>
